<div>
    <TabBar {tabs} let:tab bind:active>
        <Tab
                {tab}
                tabIndicator$type="icon"
                tabIndicator$content$class="material-icons"
        >
            <Label>{tab.label}</Label>
            <svelte:fragment slot="tab-indicator">star</svelte:fragment>
        </Tab>
    </TabBar>

    <svelte:component this={active.page}></svelte:component>
<!--    <iframe-->

<!--            title="Selected Tab"-->
<!--            name="href-tabs-frame"-->
<!--            style="width: 100%; height: 500px; border: 0;">-->

<!--    </iframe>-->
</div>

<script lang="ts">
    import Tab, { Label } from '@smui/tab';
    import TabBar from '@smui/tab-bar';

    import Message from './FirstPage.svelte'
    import  User from './userlist.svelte'
    import Setting from './SettingPage.svelte'

    let tabs = [
        {
            page:Message,
            label:'Message',
        },
        {
            page:User,
            label:'User'
        },
        {
            page:Setting,
            label: 'Setting'
        },
    ];

    let active = tabs[0];
</script>
